<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<view class="xian-gray16"></view>
		<view class="card">
			<view class="card-line">
				<view>请按您的满意度来打星</view>
			</view>
			<view class="card-line" v-for="(item, index) in list" :key="index" @touchstart="getindex(index)">
				<view class="fl">{{item.name}}</view>
				<view class="fl">
					<sx-rate :max="max" :value="values[index]" @change="getvalue" />
				</view>
			</view>
		</view>
		<view class="xian-gray16"></view>
		<view class="question-body">
			<textarea class="question-textarea" maxlength='-1' placeholder="分享本次体验" @blur="bindTextAreaBlur" auto-height />
			<view class="images">
			<view class="image" @click="showimg()" v-for="(item, index) in images" :key="index">
				<cover-image class="img" :src="item"></cover-image>
				<cover-image class="img-delete" @click.stop="pause(index)" src="../../../static/images/delete.png"></cover-image>
			</view>
			<view class="image">
				<view class="img addimg" @click="addimage"><view class="img-text">添加照片</view></view>
			</view>
		</view>
		</view>
		<view class="details-bottom1">
			<view class="but-error" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script>
import sxRate from '@/pageageA/components/sx-rate/index.vue';
import PublicHeader from '@/components/PublicHeader.vue';
import gUpload from "@/pageageA/components/g-upload/gUpload.vue"
import { mapState, mapMutations } from 'vuex';
	
	var _this
	export default {
		computed: mapState(['hasLogin', 'uerInfo', 'baseUrl']),
		components: {
			sxRate,
			PublicHeader,
			gUpload
		},
		data() {
			return {
				index: 0,
				list: [],
				values: [],
				images: [],
				value: '',
				title: '评价',
				control: true,
				columnNum:4,
				max: 5
			}
		},
		mounted() {
			_this = this
			_this.$http
				.get('/define/querybybusinessid/' + _this.$Route.query.businessId)
				.then(function(response) {
					_this.values = []
					for(let i = 0; i < response.data.length; i++){
						_this.values.push(0)
					}
					_this.list = response.data
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		methods: {
			getindex(e) {
				this.index = e
			},
			getvalue(e) {
				this.values[this.index] = e
			},
			showimg() {
				uni.previewImage({
					urls: _this.images,
				});
			},
			pause(val) {
				_this.images.splice(val, 1)
			},
			submit() {
				uni.showModal({
				    title: '',
				    content: '确定要提交评价吗？',
					cancelColor: '#57BFFF',
					confirmColor: '#57BFFF',
				    success: function (res) {
				        if (res.confirm) {
							// if (_this.value + '' === '') {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: '请输入评价内容',
							// 		duration: 1500
							// 	});
							// 	return
							// }
							// if (_this.images.length < 1) {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: '请上传一张照片',
							// 		duration: 1500
							// 	});
							// 	return
							// }
							
							// let clientScore = [{
							// 	name: '服务态度',
							// 	score: _this.value1.toFixed(2) + '',
							// 	weight: '0.30',
							// }, {
							// 	name: '服务效率',
							// 	score: _this.value2.toFixed(2) + '',
							// 	weight: '0.40',
							// }, {
							// 	name: '服务质量',
							// 	score: _this.value3.toFixed(2) + '',
							// 	weight: '0.30',
							// }]
							let clientScore = []
							for (let i = 0; i < _this.list.length; i++) {
								clientScore.push({
										name: _this.list[i].name + '',
										score: _this.values[i].toFixed(2) + '',
										weight: _this.list[i].weight + '',
								})
							}
							let query = {
								userId: _this.uerInfo.userId,
								orderId:_this.$Route.query.orderId,
								clientScore:JSON.stringify(clientScore),
								imageUrl:_this.images,
								comments:_this.value
							}
							console.log(query)
							// let str = '{"userId":6,"orderId":288,"clientScore":"[{\\"name\\":\\"服务态度\\",\\"score\\":\\"0.00\\",\\"weight\\":\\"0.30\\"},{\\"name\\":\\"服务效率\\",\\"score\\":\\"0.00\\",\\"weight\\":\\"0.40\\"},{\\"name\\":\\"服务质量\\",\\"score\\":\\"0.00\\",\\"weight\\":\\"0.30\\"}]","imageUrl":[],"comments":"1"}'
							_this.$httpJSON.post('/user/appraise/addappraise',JSON.stringify(query)).
							then(function (response) {
								console.log('response', response)
								if (response.success) {
									uni.showToast({
										icon: 'none',
										title: '评价成功',
										duration: 1500
									});
									setTimeout(function() {
										uni.switchTab({
										    url: '/pages/order/index'
										});
									}, 1500)
								} else {
									uni.showToast({
										icon: 'none',
										title: response.data,
										duration: 1500
									});
								}
							}).catch(function (error) {
								uni.showToast({
									icon: 'none',
									title: error.data,
									duration: 1500
								});
								console.log('error',error);
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			bindTextAreaBlur (e) {
				_this.value = e.detail.value
			},
			addimage() {
				var _this = this
				if (this.images.length > 0) {
					uni.showToast({
						icon: 'none',
						title: '只能上传一张照片',
						duration: 1500
					});
					return
				}
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (val) {
				        console.log(JSON.stringify(val.tempFilePaths));
						// 预览图片
						uni.uploadFile({
							 // 需要上传的地址
							url:_this.baseUrl+'/user/appraise/uploadimg?uploadFile='+val.tempFilePaths[0],
							// filePath  需要上传的文件
							filePath: val.tempFilePaths[0],
							name: 'uploadFile',
							success(res1) {
								// 显示上传信息
								console.log(res1)
								let form = JSON.parse(res1.data)
								if (form.success) {
									_this.images.push(form.msg)
								}
								console.log(_this.images)
							}
						});
						// onProgressUpdate 上传对象更新的方法
						// uper.onProgressUpdate(function(res){
						// 	// 进度条等于 上传到的进度
						// 	_this.percent = res.progress
						// 	console.log('上传进度' + res.progress)
						// 	console.log('已经上传的数据长度' + res.totalBytesSent)
						// 	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
						// })
				    }
				});
			},
			//上传
			uploadImg() {
				this.$refs.gUpload.uploadImg()
			},
			//接收上传后返回的值
			chooseFile(list, v) {
				console.log(list, v)
			},
			//控件内外部切换
			switch1Change(e){
				this.control=!this.control
			},
			//列数量切换
			switch2Change(e){
				this.columnNum=this.columnNum==3?'4':'3'
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #F9FAFB;
}
.card{
	background-color: #FFFFFF;
	overflow: hidden;
	width: 100%;
	font-size: 26rpx;
	color: rgba(153,153,153,1);
	/* height: 360rpx; */
}
.card-line{
	width: 91.48%;
	height: 50rpx;
	line-height: 50rpx;
	margin-left: 4.26%;
}
.question-body {
	width: 100%;
	min-height: 342rpx;
	background-color: #FFFFFF;
	padding-bottom: 30rpx;
}
.question-textarea {
	padding-top: 30rpx;
	min-height: 140rpx;
	width: 91.4%;
	margin-left: 4.3%;
}
.images {
	width: 96%;
}
.image {
	float: left;
	width: 150rpx;
	height: 150rpx;
	margin-top: 20rpx;
	margin-left: 30rpx;
	border-radius: 10rpx;
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
	text-align: center;
}
.addimg {
	background-image: url('../../../static/images/upload_image.png');
	background-size:100% 100%; 
}
.img-text {
	font-size:24rpx;
	font-family:MicrosoftYaHei;
	color:rgba(153,153,153,1);
	letter-spacing:1rpx;
	padding-top: 96rpx;
}
.img-delete {
	width: 30%;
	height: 30%;
	border-radius: 10rpx;
	position: relative;
	left: 70%;
	bottom: 100%;
	
}
.details-bottom1 {
	width: 100%;
	margin-top: 100rpx;
	margin-bottom: 22rpx;
	position: absolute;
	bottom: 0;
}
.but-error {
	width: 91.4%;
	margin-left: 4.3%;
	height: 100rpx;
	background:rgba(87,191,255,1);
	box-shadow:0px 6px 20px 0px rgba(87,191,255,0.5);
	border-radius:10rpx;
	font-size:36rpx;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
